<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        class="order-card-box"
        shadow="never"
      >
        <el-form
          ref="orderForm"
          label-width="80px"
        >
          <div class="filter-container">
            <el-row :gutter="50">
              <el-col :span="8">
                <el-form-item
                  label="订单编号："
                  style="margin-bottom: 0px"
                  label-width="110px"
                  prop="id"
                >
                  <el-input
                    v-model="form.id"
                    clearable
                    placeholder="请输入订单编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="订单状态："
                  style="margin-bottom: 20px"
                  label-width="110px"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="付费状态："
                  style="margin-bottom: 20px"
                  label-width="110px"
                  prop="paymentStatus"
                >
                  <el-select
                    v-model="form.paymentStatus"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      label="已付"
                      :value="2"
                    />
                    <el-option
                      label="未付"
                      :value="1"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="发件人姓名："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-input
                    v-model="form.senderName"
                    clearable
                    placeholder="请输入发件人姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="发件人电话："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-input
                    v-model="form.senderPhone"
                    clearable
                    placeholder="请输入发件人电话"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="发件人地址："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-row>
                    <el-col :span="8">
                      <el-select
                        v-model="form.senderProvinceId"
                        clearable
                        placeholder="请选择省"
                        @change="areaList(1, form.senderProvinceId)"
                      >
                        <el-option
                          v-for="item in provinceList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-select
                        v-model="form.senderCityId"
                        clearable
                        placeholder="请选择市"
                        @change="areaList(2, form.senderCityId)"
                      >
                        <el-option
                          v-for="item in cityList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-select
                        v-model="form.senderCountyId"
                        clearable
                        placeholder="请选择区/县"
                      >
                        <el-option
                          v-for="item in countyList"
                          :key="item.id"
                          clearable
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="收件人姓名："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-input
                    v-model="form.receiverName"
                    clearable
                    placeholder="请输入收件人姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="收件人电话："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-input
                    v-model="form.receiverPhone"
                    clearable
                    placeholder="请输入收件人电话"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="收件人地址："
                  style="margin-bottom: 20px"
                  label-width="110px"
                >
                  <el-row>
                    <el-col :span="8">
                      <el-select
                        v-model="form.receiverProvinceId"
                        clearable
                        placeholder="请选择省"
                        label-width="30px"
                        @change="areaList(1,form.receiverProvinceId)"
                      >
                        <el-option
                          v-for="item in provinceList2"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-select
                        v-model="form.receiverCityId"
                        clearable
                        placeholder="请选择市"
                        label-width="30px"
                        @change="areaList(2,form.receiverCityId)"
                      >
                        <el-option
                          v-for="item in cityList2"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-select
                        v-model="form.receiverCountyId"
                        clearable
                        placeholder="请选择区/县"
                        label-width="30px"
                      >
                        <el-option
                          v-for="item in countyList2"
                          :key="item.id"
                          clearable
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="warning"
                  @click="search"
                >搜索</el-button>
                <el-button
                  class="reset-btn"
                  @click="reset"
                >重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-card>
    </div>
    <!-- 表格 -->
    <div class="app-container">
      <el-card
        class="table-card-box"
        shadow="never"
      >
        <el-table
          v-loading="loading"
          :data="tableList"
          fit
          style="width: 100%"
          stripe
        >
          <!-- @selection-change="handleSelectionChange" -->
          <!-- :header-cell-style="{ background: 'rgba(250,252,255,1)' }" -->
          <el-table-column
            label=""
            min-width="2px"
          > </el-table-column>
          <el-table-column
            fixed="left"
            label="序号"
            type="index"
            min-width="180px"
          >
          </el-table-column>
          <el-table-column
            label="订单编号"
            min-width="180px"
            prop="id"
          >
          </el-table-column>
          <el-table-column
            label="运单编号"
            min-width="180px"
            prop="memberId"
          >
          </el-table-column>
          <el-table-column
            label="下单时间"
            min-width="180px"
            prop="createTime"
          >
          </el-table-column>
          <el-table-column
            label="订单状态"
            min-width="120px"
            prop="status"
          >
            <template #default="scope">
              {{ formatStatus(scope.row.status) }}
            </template>
          </el-table-column>

          <el-table-column
            label="发件人姓名"
            min-width="120px"
            prop="senderName"
          >
          </el-table-column>
          <el-table-column
            label="发件人电话"
            min-width="160px"
            prop="senderPhone"
          >
          </el-table-column>
          <el-table-column
            label="发件人地址"
            min-width="160px"
            prop="senderAddress"
          >
          </el-table-column>
          <el-table-column
            label="收件人姓名"
            min-width="120px"
            prop="receiverName"
          >
          </el-table-column>
          <el-table-column
            label="收件人电话"
            min-width="160px"
            prop="receiverPhone"
          >
          </el-table-column>
          <el-table-column
            label="收件人地址"
            min-width="160px"
            prop="receiverAddress"
          >
          </el-table-column>
          <el-table-column
            label="取件类型"
            min-width="120px"
            prop="pickupType"
          >
            <template #default="scope">
              {{ formatPickupType(scope.row.pickupType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="付费类型"
            min-width="120px"
            prop="paymentMethod"
          >
            <template #default="scope">
              {{ formatPaymentMethod(scope.row.paymentMethod) }}
            </template>
          </el-table-column>
          <el-table-column
            label="付费状态"
            prop="paymentStatus"
          >
            <template #default="scope">
              {{ formatPaymentStatus(scope.row.paymentStatus) }}
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            fixed="right"
          >
            <template #default="{row}">
              <!-- <el-button
                type="text"
                size="small"
                @click="orderDetail(scope.row.id)"
              >查看详情</el-button> -->
              <router-link
                :to="`/business/edit-order?orderId=${row.id}&status=${row.status}&pickUpType=${row.pickupType}&transportOrderId`"
                style="color:#419eff ;"
              >查看详情</router-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div
          v-if="total > 10"
          class="pagination"
        >
          <div class="pages">
            <el-pagination
              :current-page="Number(form.page)"
              :total="Number(total)"
              :page-size="Number(form.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { orderListAPI, getAreasAPI } from '@/api/order'

export default {
  data () {
    return {
      tableList: [],
      form: {
        page: 1,
        pageSize: 10,
        createTime: '', // 下单时间
        status: '', // 订单状态: 23000为待取件,23001为已取件，23002为网点自寄，23003为网点入
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderAddress: '', // 发件人详细地址
        senderProvinceId: '', // 发件人省份id
        senderCityId: '', // 发件人城市id
        senderCountyId: '', // 发件人区域id
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverAddress: '', // 收件人详细地址
        receiverProvinceId: '', // 收件人省份id
        receiverCityId: '', // 收件人城市id
        receiverCountyId: '', // 收件人区域id
        pickupType: '', // 取件类型，1为网点自寄，2为上门取件
        paymentMethod: '', // 付款方式,1.预结2到付
        paymentStatus: '', // 付款状态,1.未付2已付
        id: '',
        memberId: '', // 客户id
        orderType: '' // 订单类型，1为同城订单，2为城际订单
      },
      total: 80,
      // 订单状态
      statusList: [
        {
          value: '23000',
          name: '待取件'
        },
        {
          value: '23001',
          name: '已取件'
        },
        {
          value: '23005',
          name: '运输中'
        },
        {
          value: '23008',
          name: '派送中'
        },
        {
          value: '23009',
          name: '已签收'
        },
        {
          value: '23010',
          name: '拒收'
        },
        {
          value: '23011',
          name: '已取消'
        },
        {
          // value: '',
          name: '全部'
        }
      ],
      provinceList: [],
      cityList: [],
      countyList: [],
      provinceList2: [],
      cityList2: [],
      countyList2: [],
      loading: true
    }
  },
  mounted () {
    this.orderList()
    this.areaList(0, 0)
  },
  methods: {
    // 获取订单详情数据
    async orderList () {
      // const { page, pageSize } = this.form
      const res = await orderListAPI(this.form)
      // console.log(res)
      this.tableList = res.data.items
      this.total = res.data.counts
      this.loading = false
    },
    // ----------------------分页处理-----------------------------
    // 页数处理
    handleSizeChange (pageSize) {
      this.form.pageSize = pageSize
      this.orderList()
    },
    // 当前页数
    handleCurrentChange (page) {
      this.form.page = page
      this.orderList()
    },
    // ----------------------重置表单--------------------------------
    reset () {
      this.form = {
        page: 1,
        pageSize: 10,
        createTime: '', // 下单时间
        status: '', // 订单状态: 23000为待取件,23001为已取件，23002为网点自寄，23003为网点入
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderAddress: '', // 发件人详细地址
        senderProvinceId: '', // 发件人省份id
        senderCityId: '', // 发件人城市id
        senderCountyId: '', // 发件人区域id
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverAddress: '', // 收件人详细地址
        receiverProvinceId: '', // 收件人省份id
        receiverCityId: '', // 收件人城市id
        receiverCountyId: '', // 收件人区域id
        pickupType: '', // 取件类型，1为网点自寄，2为上门取件
        paymentMethod: '', // 付款方式,1.预结2到付
        paymentStatus: '', // 付款状态,1.未付2已付
        id: '',
        memberId: '', // 客户id
        orderType: '' // 订单类型，1为同城订单，2为城际订单
      }
      this.orderList()
    },
    // ----------------------搜索功能--------------------------
    search () {
      this.orderList()
    },
    // ---------------------------表单处理-----------------------------
    // 获取省份 0省 1市 2县
    async areaList (type, id) {
      // const { receiverCity, receiverProvince, receiverCounty } = this.form

      const res = await getAreasAPI({ parentId: id })
      // console.log(res)
      if (type === 0) {
        this.provinceList = []
        this.provinceList2 = []
        this.provinceList.push(...res.data)
        this.provinceList2.push(...res.data)
      } else if (type === 1) {
        this.cityList = []
        this.cityList2 = []
        this.cityList.push(...res.data)
        this.cityList2.push(...res.data)
      } else if (type === 2) {
        this.countyList = []
        this.countyList2 = []
        this.countyList.push(...res.data)
        this.countyList2.push(...res.data)
      }
    },
    // ---------------------------订单状态--------------------------
    formatStatus(status) {
      // console.log(status)
      const STATUSMAP = {
        '23000': '待取件',
        '23001': '已取件',
        '23002': '网点自寄',
        '23003': '网点入库',
        '23004': '待装车',
        '23005': '运输中',
        '23006': '网点出库',
        '23007': '待派送',
        '23008': '派送中',
        '23009': '已签收',
        '23010': '拒收',
        '23011': '已取消'
      }
      return STATUSMAP[status]
    },
    // ---------------------------取件类型--------------------------
    formatPickupType(pickupType) {
      const PickupTypeMAP = {
        '1': '网点自寄',
        '2': '上门取件'
      }
      return PickupTypeMAP[pickupType]
    },
    // ---------------------------付费类型--------------------------
    formatPaymentMethod(paymentMethod) {
      const PaymentMethodMAP = {
        '1': '预结',
        '2': '到付'
      }
      return PaymentMethodMAP[paymentMethod]
    },
    // -----------------------------------付费状态---------------------------------
    formatPaymentStatus(paymentStatus) {
      const PaymentStatusMAP = {
        '1': '未付',
        '2': '已付'
      }
      return PaymentStatusMAP[paymentStatus]
    }
    // ------------------------------------查看详情------------------------------------------------
    // orderDetail(id) {
    //   this.$router.push({ path: '/business/edit-order', query: { orderId: id }})
    // }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
